<template>
	<view>
		<view class="header">
			<view class="jiedana">{{details.status_text}}</view>
			<view class="dindanlistaba">
				<view class="ddnriong">
					<view class="ttlias">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">订单编号:{{details.order_number}}
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							{{details.updated_at}}</view>
					</view>
					<view class="huoyuns">
						<view class="hya">{{details.freight_name}}</view>
						<view style="font-size: 32upx;margin-left: 10upx;float: left; line-height: 44upx;">{{details.vehicle.title}}</view>
					</view>
					<view class="zhuangxie">
						<view class="dinwx">
							<view class="z">装</view>
							<view class="shuru">
								<view style="font-size: 36upx;">{{details.place.delive.mapAddress}}</view>
								<view>{{details.place.delive.mapAddressDetail}}</view>
							</view>
						</view>
						<view class="dinwx">
							<view v-for="(row,idx) in details.place.receive" class="dsf alc fz28 col999 pb24 ">
								<view class="x">卸</view>
								<view class="shuru">
									<view style="font-size: 36upx;">{{row.mapAddress}}</view>
									<view>{{row.mapAddressDetail}}</view>
								</view>
							</view>
							
						</view>

					</view>


				</view>
			</view>
			<view class="dindanlistab">
				<view class="ddnriong">
					<view class="ttlias">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">货物信息
						</view>

					</view>
					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">货物名称
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							货物名称</view>
					</view>

					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">包装方式
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							捆扎</view>
					</view>
					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">重量（吨）
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							1</view>
					</view>
					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">体积（立方）
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							10</view>
					</view>
					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">备注
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							备注备注备注备注备注</view>
					</view>
				</view>
			</view>

			<view class="dindanlistaaab">
				<view class="ddnriong">
					<view class="ttlias">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">订单详情
						</view>

					</view>
					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">订单编号:
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							{{details.order_number}}</view>
					</view>

					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">下单时间:
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							{{details.updated_at}}</view>
					</view>
					<view class="ttliaas">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">跟车人数:
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							{{details.remarks.followingNumber}}</view>
					</view>
					<view class="ttlias">
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">联系电话:
						</view>
						<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
							{{details.phone}}</view>
						<view class="ttliaas">
							<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">支付方式:
							</view>
							<view
								style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
								{{details.pay_type}}<image src="../../static/fhy.png"
									style="width: 30upx;height: 30upx;float: right;margin-top: 28upx;"></image>
							</view>
						</view>
						<view class="ttliaas">
							<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">优惠券
							</view>
							<view
								style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right; color: red;">
								-￥{{details.have_back}}<image src="../../static/fhy.png"
									style="width: 30upx;height: 30upx;float: right;margin-top: 28upx;"></image>
							</view>
						</view>
						<view class="ttliaas">
							<view style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;">实付金额：
							</view>
							<view
								style="float: left;width: 50%; font-size: 24upx;line-height: 82upx;text-align: right;">
								￥{{details.have_pay_price}}</view>
						</view>
					</view>
				</view>
			</view>
 
			<view  v-if="details.driverOrder"  class="touxiang">
				<image :src="details.driverOrder.driver.avatar"
 
					style="width: 116upx; height: 116upx;float: left;margin-left: 20upx; margin-top: 26upx; border-radius: 100upx;">
				</image>
				<view  class="namelista">
					<view style="width: 100%;height: 50upx;margin-top: 30upx;">
						<view style="float: left;">{{details.driverOrder.driver.driver_name}}</view>
						<view style="float: left; color: #FE7002;"> {{details.driverOrder.driver.service_mark}}分</view>
					</view>
					<view style="width: 100%;height: 50upx;margin-top: 30upx;">
						<view style="float: left;">
							<image src="../../static/now.png" style="width: 30upx; height: 40upx;float: left;"></image>
						</view>
						<view style="float: left; color: #777; font-size: 28upx;"> {{details.driverOrder.driver.address}}</view>
					</view>

				</view>
				<view class="tubshou">
					<image src="../../static/hot.png"
						style="width: 40upx; height: 40upx;float: left;margin-top: 30upx; margin-left: 16upx;"></image>
					<view style="width: 100%; height: 50upx;float: left; margin-top: 15upx;">收藏</view>
				</view>
				<view class="tubshou">
					<image src="/static/tel.png"
						style="width: 40upx; height: 40upx;float: left;margin-top: 30upx; margin-left: 16upx;"></image>
					<view style="width: 100%; height: 50upx;float: left; margin-top: 15upx;">联系</view>
				</view>
			</view>
			<view style="width: 100%; height:200upx; float: left;">

			</view>
		</view>
		<view style="width: 100%; height: 124upx; position: fixed;bottom: 0; background: #fff;">
			<view class="qxyuyue pay">立即支付</view>
			<view class="qxyuyue">取消订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {},
				id: 1
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData() {
				this.$api['get']('order/get-order', {
					orderid: this.id
				}).then(res => {
					if (res.code == 200) {
						this.details = res.data;
					}
				});

			},
		}
	}
</script>

<style scoped lang="scss">
	/* 样式修改 */
	.header {
		width: 100%;
		height: 418upx;
		height: 418upx;
		background: linear-gradient(180deg, #0085FC 0%, #efefef 100%);
		border-radius: 0upx 0upx 0upx 0upx;
		opacity: 1;
	}

	.jiedana {
		width: 100%;
		height: 50upx;
		float: left;
		margin-top: 88upx;
		text-align: center;
		line-height: 50upx;
		color: #fff;

	}

	.xinxia {
		width: 90%;
		height: 150upx;
		float: left;
		margin-left: 5%;
		margin-top: 20upx;
	}

	.jiedanshifu {
		width: 60%;
		height: 100%;
		float: left;
	}

	.tablidna {
		width: 90%;
		height: 412upx;
		float: left;
		margin-left: 5%;
		background: #fff;
		border-radius: 16upx;
		margin-top: 10upx;
	}

	.chelgu {
		width: 90%;
		height: 50upx;
		float: left;
		margin-left: 5%;
		margin-top: 15upx;
	}

	.tupdinw {
		width: 90%;
		height: 250upx;
		float: left;
		margin-left: 5%;
		margin-top: 15upx;
	}

	.dindanlistaba {
		width: 90%;
		height: 544upx;
		float: left;
		margin-top: 30upx;
		margin-left: 5%;
		border-radius: 16upx;
		background: #FFFFFF;
	}

	.dindanlistab {
		width: 90%;
		height: 584upx;
		float: left;
		margin-top: 30upx;
		margin-left: 5%;
		border-radius: 16upx;
		background: #FFFFFF;
	}

	.dindanlistaaab {
		width: 90%;
		height: 698upx;
		float: left;
		margin-top: 30upx;
		margin-left: 5%;
		border-radius: 16upx;
		background: #FFFFFF;
	}

	.ddnriong {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
	}

	.ttlias {
		width: 100%;
		height: 82upx;
		float: left;
		border-bottom: 1upx solid#ccc;
	}

	.ttliaas {
		width: 100%;
		height: 82upx;
		float: left;
	}

	.huoyuns {
		width: 100%;
		height: 44upx;
		float: left;
		margin-top: 30upx;
	}

	.hya {
		width: 72upx;
		height: 44upx;
		border-radius: 10upx;
		border: 1upx solid #0085FC;
		text-align: center;
		line-height: 44upx;
		color: #0085FC;
		font-size: 20upx;
		float: left;
	}

	.zhuangxie {
		width: 100%;
		height: 304upx;
		float: left;
		margin-top: 40upx;
		border-radius: 10upx;
	}

	.zhuangxiea {
		width: 100%;
		height: 414upx;
		float: left;
		background: #fff;
		margin-top: 40upx;
		border-radius: 10upx;
	}

	.dinwx {
		width: 90%;
		height: 122upx;
		float: left;
		margin-top: 32upx;
		margin-left: 5%;
	}

	.z {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 22upx;
		background: #0194fd;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
	}

	.x {
		width: 44upx;
		height: 44upx;
		float: left;
		margin-top: 22upx;
		background: #FF902A;
		color: #fff;
		border-radius: 100upx;
		text-align: center;
		line-height: 44upx;
	}

	.shuru {
		width: 85%;
		height: 122upx;
		border-radius: 10upx;
		float: left;
		margin-left: 16upx;
	}

	.shurk {
		width: 70%;
		height: 100%;
		float: left;
		margin-left: 16upx;
	}

	.dizpu {
		width: 25%;
		height: 40upx;
		float: left;
		border-left: 1upx solid #ccc;
		margin-top: 40upx;
		text-align: right;
		color: #777777;
	}

	.dzcylx {
		width: 176upx;
		height: 52upx;
		float: left;
		background: #F6F6F6;
		border-radius: 5upx;
		margin-left: 5%;
		margin-top: 20upx;
	}

	.dinwxaa {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;
		background: rgba(1, 149, 253, 0.05);
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		border: 1upx solid #0195FD;
	}

	.dinwxaac {
		width: 90%;
		height: 122upx;
		float: left;
		margin-left: 5%;
		margin-top: 32upx;

		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;

	}

	.imsl {
		width: 32upx;
		height: 32upx;
		float: left;
		margin-top: 40upx;
		margin-left: 25upx;
	}

	.ykhg {
		width: 150upx;
		height: 100%;
		float: left;
		margin-left: 20upx;
		line-height: 122upx;
		text-align: center;
	}

	.jgfy {
		width: 150upx;
		height: 100%;
		float: right;
		margin-right: 20upx;
		line-height: 122upx;
		text-align: center;
	}

	.anyfh {
		width: 90%;
		height: 92upx;
		float: left;
		margin-left: 5%;

	}

	.yongxhe {
		width: 70%;
		height: 100%;
		float: left;
		border-top-left-radius: 20upx;
		border-bottom-left-radius: 20upx;
		background: #0194fd;
		text-align: center;
		line-height: 92upx;
		color: #fff;
	}

	.yuyue {
		width: 30%;
		height: 100%;
		float: left;
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		background: #FF902A;
		text-align: center;
		line-height: 92upx;
		color: #fff;
	}

	.mymone {
		width: 100%;
		height: 150upx;
		float: left;
		background: #fff;

		.wdqb {
			width: 90%;
			height: 100%;
			float: left;
			margin-left: 5%;

			.title_mymone {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				border-bottom: 1upx solid #ccc;
				float: left;
			}

			.yuemone {
				width: 100%;
				height: 150upx;
				float: left;

				.litbs {
					width: 28%;
					height: 100%;
					float: left;
					margin-left: 4%;

				}
			}
		}

	}

	.bzhua {
		width: 100%;
		height: 108upx;
		background: #F8F8F8;
		float: left;
	}

	.ckxq {
		width: 236upx;
		height: 88upx;
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		border: 2upx solid #0195FD;
		float: left;
		text-align: center;
		color: #0195FD;
		line-height: 88upx;
		margin-top: 20upx;

	}

	.ljqd {
		width: 324upx;
		height: 88upx;
		background: #0195FD;
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		float: left;
		text-align: center;
		line-height: 88upx;
		margin-top: 20upx;
		color: #fff;
		margin-left: 20upx;
	}

	.qxyuyue {
		width: 200upx;
		height: 76upx;
		background: #FFFFFF;
		border-radius: 16upx 16upx 16upx 16upx;
		opacity: 1;
		border: 2upx solid #DDDDDD;
		float: right;
		margin-right: 30upx;
		margin-top: 30upx;
		text-align: center;
		line-height: 76upx;
	}

	.pay {
		color: #fff;
		border: 0 !important;
		background: #0083FE !important;
	}

	.touxiang {
		width: 90%;
		height: 172upx;
		float: left;
		background: #fff;
		border-radius: 10upx;
		margin-left: 5%;
		margin-top: 20upx;
	}

	.namelista {
		width: 300upx;
		height: 100%;
		float: left;
		margin-left: 20upx;
	}

	.tubshou {
		width: 80upx;
		height: 100%;
		float: left;
		margin-left: 20upx;
	}
</style>